<script setup>
import {ref, onBeforeUpdate, inject} from "vue";
import {elErrorMessageTip, elMessageTip} from "@/utils/MessageTipUtils.js";
import {updateProductCategoryAPI} from "@/api/product.js";

const env = import.meta.env
const PRODUCT_CATEGORY_NAME_MAX_LEN = env.VITE_PRODUCT_CATEGORY_NAME_MAX_LEN
const PRODUCT_CATEGORY_CODE_MAX_LEN = env.VITE_PRODUCT_CATEGORY_CODE_MAX_LEN
const PRODUCT_CATEGORY_DESC_MAX_LEN = env.VITE_PRODUCT_CATEGORY_DESC_MAX_LEN

const {updateProductCategoryVisible, searchByCondition, productCategory} = inject('updateProductCategory')

// 分类数据
const id = ref('')
const name = ref('')
const code = ref('')
const disabled = ref(false)
const description = ref('')
onBeforeUpdate(() => {
  id.value = productCategory.value.id
  name.value = productCategory.value.name
  code.value = productCategory.value.code
  disabled.value = productCategory.value.disabled
  description.value = productCategory.value.description
})

// 修改商品分类
const updateProductCategory = async () => {
  if (name.value.length <= 0 || code.value.length <= 0) {
    elErrorMessageTip("请先完成输入")
    return
  }
  const res = await ElMessageBox.confirm(
      `是否确认提交修改`,
      '提交修改',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    // 添加分类
    return await updateProductCategoryAPI(id.value, name.value, code.value, disabled.value, description.value)
  }).catch(() => {
    return false
  })
  // 成功
  if (res) {
    // 输入框数据清除
    name.value = ''
    code.value = ''
    disabled.value = false
    description.value = ''
    // 关闭窗口
    updateProductCategoryVisible.value = false
    // 重新查询数据
    searchByCondition()
  }
}
</script>

<template>
  <div>
    <el-dialog v-model="updateProductCategoryVisible" title="修改一级商品分类">
      <el-form
          label-position="right"
          label-width="130px"
      >
        <el-form-item label="商品分类 ID">{{ id }}</el-form-item>
        <el-form-item label="商品分类名称">
          <el-input
              v-model="name"
              placeholder="请输入商品分类名称"
              clearable
              :maxlength="PRODUCT_CATEGORY_NAME_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品分类编码">
          <el-input
              v-model="code"
              placeholder="请输入商品分类编码"
              clearable
              :maxlength="PRODUCT_CATEGORY_CODE_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品分类是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品分类描述">
          <el-input
              autosize
              type="textarea"
              placeholder="请输入商品分类描述"
              clearable
              v-model="description"
              :maxlength="PRODUCT_CATEGORY_DESC_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
      </el-form>
      <div class="flex justify-end items-center">
        <el-button type="primary" @click="updateProductCategory">提交修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>